<template>
	<div :id="ramdomColor()" class="loginContainer">
		<div :id="ramdomColor()" class="one">
			<div :id="ramdomColor()" class="two">
				<div :id="ramdomColor()" class="three">
					<div :id="ramdomColor()" class="four">
						<div :id="ramdomColor()" class="five">
							<div class="loginform">
								<div class="bmstitle">
									<span>Casso-W 办公系统</span>
								</div>
								<el-form
									:model="ruleForm"
									status-icon
									:rules="rules"
									ref="ruleForm"
									label-width="40px"
									class="demo-ruleForm"
								>
									<el-form-item label="账号" prop="name">
										<el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="密码" prop="pass">
										<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item>
										<div class="btns">
											<el-button size="small" type="success" @click="submitForm('ruleForm')">登录</el-button>
											<el-button size="small" type="danger" @click="resetForm('ruleForm')">重置</el-button>
										</div>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入密码"));
			} else {
				callback();
			}
		};
		var validateName = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入账号"));
			} else {
				callback();
			}
		};
		return {
			ruleForm: {
				pass: "",
				name: ""
			},
			rules: {
				pass: [
					{
						validator: validatePass,
						trigger: "blur"
					}
				],
				name: [
					{
						validator: validateName,
						trigger: "blur"
					}
				]
			}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let form = new FormData();
					form.append("usr", this.ruleForm.name);
					form.append("pwd", this.ruleForm.pass);
					this.$ajax
						.post("/login/", form)
						.then(res => {
							// console.log(res.data);
							window.localStorage.setItem(
								"BMS_token",
								res.data.token
							);
							this.get_user_infos(1);
						})
						.catch(err => {
							this.$message({
								message: "登陆失败,请检查用户名/密码",
								type: "warning"
							});
							this.resetForm();
						});
				} else {
					// console.log("error submit!!");
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.ramdomColor();
		},
		ramdomColor() {
			let num = Math.random();
			let str = "";
			if (0 < num <= 0.2) {
				str = "danger";
			} else if (0.2 < num <= 0.4) {
				str = "warning";
			} else if (0.4 < num <= 0.6) {
				str = "info";
			} else if (0.6 < num <= 0.8) {
				str = "success";
			} else {
				str = "primary";
			}
			return str;
		},
		// 获取用户信息
		get_user_infos(flag) {
			this.$ajax
				.get("/user")
				.then(res => {
					res.data.results.forEach(item => {
						if (item.username == this.ruleForm.name) {
							window.localStorage.setItem(
								"user",
								JSON.stringify(item)
							);
							this.$router.push({ name: "index" });
							return false;
						}
					});
				})
				.catch(err => {
					if (flag) {
						this.$message({
							message: "获取用户失败",
							type: "warning"
						});
					} else {
					}
				});
		}
	},
	mounted() {
		// 获取用户信息
		this.get_user_infos();
	}
};
</script>


<style lang="scss" scoped>
.loginContainer {
	// margin-top: 25px;
	height: 700px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	.one {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 90%;
		height: 90%;
		border-radius: 20%;
		.two {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 90%;
			height: 90%;
			border-radius: 20%;
			.three {
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 90%;
				height: 90%;
				border-radius: 20%;
				.four {
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 90%;
					height: 90%;
					border-radius: 20%;
					.five {
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 90%;
						height: 90%;
						border-radius: 20%;
						.loginform {
							// background-color: whitesmoke;
							border-radius: 20%;
							padding: 25px;
							width: 50%;
							margin: 5px auto;
							box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
							.bmstitle {
								width: 100%;
								height: 80px;
								display: flex;
								flex-direction: column;
								justify-content: center;
								text-align: center;
								margin-bottom: 8px;
								span {
									font-size: 24px;
									font-family: "微软雅黑";
									opacity: 0.6;
								}
							}
							.btns {
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
}
// #danger{
//     background-color: #F56C6C;
//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// }
// #warning{
//     background-color: #E6A23C;
//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// }
// #info{
//     background-color: #909399;
//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// }
// #success{
//     background-color: #67C23A;
//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// }
// #primary{
//     background-color: #409EFF;
//     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// }
</style>